<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
</head>
<body>
<div id="app">
    <el-form :inline="true"  class="demo-form-inline">
        <el-form-item label="仓库名称">
            <el-select v-model="input1" placeholder="选择仓库">
                <div v-for="item in wares">
                    <el-option v-bind:label="item.wareName" v-bind:value="item.wareId"></el-option>
                </div>

            </el-select>

        </el-form-item>

        <el-form-item label="产品名称">
            <el-input v-model="input2" placeholder="请输入产品名称"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onCheck">查询</el-button>
            <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
        <span style="color: red">当前仓库预警有{{total}}条</span>
    </el-form>

    <template>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <!--左侧固定列:序号-->
            <el-table-column
                    fixed="left"
                    label="序号"
                    width="120"
             type="index">
            </el-table-column>
            <el-table-column
                    label="仓库名称"
                    width="120">
                <template slot-scope="scope">{{ scope.row.ware.wareName }}</template>
            </el-table-column>
            <el-table-column
                    label="产品编号"
                    width="120">
                <template slot-scope="scope">{{ scope.row.product.pnumber }}</template>
            </el-table-column>
            <el-table-column
                    label="产品名称"
                    width="120">
                <template slot-scope="scope">{{ scope.row.product.pname }}</template>
            </el-table-column>
            <el-table-column
                    label="库存量"
                    width="150">
                <template slot-scope="scope">{{ scope.row.stock }}</template>
            </el-table-column>
            <el-table-column
                    label="状态"
                    width="120">
                <template slot-scope="scope">
                    <span  style="color: red">库存不足</span>
                </template>
            </el-table-column>
            <!--货架数目 从货架管理表中查询-->
            <el-table-column
                    label="备注"
                    width="120">
                <template slot-scope="scope">{{ scope.row.product.premarks }}</template>
            </el-table-column>
            <!--货位数目 从货架管理表中查询-->
            <el-table-column
                    label="当前产品预警值"
                    width="120">
                <template slot-scope="scope">{{ scope.row.warningNum }}</template>
            </el-table-column>
            <!--空余货位 需要连表查询出-->
            <!--右侧固定列:操作-->
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="300">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="success"
                            @click="handleEdit(scope.$index, scope.row)"><i class="el-icon-edit"></i></el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>

    <el-dialog title="设置当前预警值" :visible.sync="dialogFormVisible">
        <el-form ref="stockWarn" :model="stockWarn" label-width="80px">
            <div>仓库名称：<span>{{stockWarn.ware.wareName}}</span></div>
            <div>产品名称：<span>{{stockWarn.product.pname}}</span></div>
            <div>当前产品预警值：<span>{{stockWarn.warningNum}}</span></div>
            <el-form-item label="设置预警值">
                <el-input v-model="stockWarn.warningNum" size="small" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即设置</el-button>
                <el-button @click="onCancel">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <el-row :gutter="20">
        <el-col :span="10">
             <span>
                第{{(current-1)*pageSize+1}}到{{current*pageSize}}条记录,总共{{total}}条
            </span>
        </el-col>
        <el-col :span="10">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="loadPage"
                    :current-page="current"
                    :page-sizes="[5,10,20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-col>


    </el-row>
</div>

<script src="/js/axios/axios.min.js"></script>
<script src="/js/vue/vue.js"></script>
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                tableData:null,
                total:0,
                current:1,
                pageSize:5,
                currentRow: null,
                stockWarn:{
                    productId:'',
                    warningNum:'',
                    warehouseId:'',
                    stock:'',
                    product:'',
                    ware:''
                },
                dialogFormVisible:false,
                input1:'',
                input2:'',
                wares:[]
            }
        },
        methods:{
            setCurrent(row) {
                this.$refs.singleTable.setCurrentRow(row);
            },
            handleSizeChange(val) {
                this.pageSize=val;
                this.loadPage(1);
            },
            handleCurrentChange(val) {
                this.currentRow = val;
            },
            loadPage(current){
                this.current = current;
                if(this.input1==''&&this.input2=='') {
                    axios.get("/warning/" + current + "/" + this.pageSize).then(value => {
                        if(value.data.code == 1)
                    {
                        this.total = value.data.data.total;
                        this.tableData = value.data.data.records;
                        this.current = value.data.data.current;
                    }
                });
                }else{
                    axios.get("/warning/" + current + "/" + this.pageSize+"?wareNo="+this.input1+"&productName="+this.input2).then(value=>{
                        if(value.data.code == 1)
                        {
                            this.total = value.data.data.total;
                            this.tableData = value.data.data.records;
                            this.current = value.data.data.current;
                        }
                    })
                }
                axios.get("/warehouses").then(value =>{
                    this.wares=[];
                    if (value.data.code ==1){
                        var v=value.data.data;
                    for (var i = 0; i < v.length; i++) {

                        var ware={
                            'wareName':v[i].wareName,
                            'wareId':v[i].id
                        }
                        this.wares.push(ware);

                    }
                }
            })
            },
            handleEdit(index,row){
                this.dialogFormVisible=true;
                this.stockWarn=row;

            },
            onSubmit(){
                axios.put("/warning",this.stockWarn);
                this.loadPage(this.current);
                this.dialogFormVisible=false;
            },
            onCheck(){
                this.loadPage(1);
            },
            onCancel(){
                this.dialogFormVisible=false;
                this.loadPage(this.current);
            },
            resetForm(){
                this.input1='';
                    this.input2='';
                    this.loadPage(1);
            }

        },
        mounted(){
            this.loadPage(1);
        }
    });
</script>

</body>
</html>